<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/JSExtend.js"></script>
<title>Insert title here</title>
<style type="text/css">
body {
	font-family: "微软雅黑"
}

input {
	font-size: 16px;
	width: 300px;
	height: 25px;
	width: 300px;
}

table tr {
	height: 40px;
	line-height: 40px;
}
</style>
<script type="text/javascript">
	$(function() {
		$("#nickname").focus();
		initInfo();
	});

	function showInfos() {
		$("#shadow").css("display", "block");
		$("#shadow").css("z-index", "10");
		$("#infoDIV").css("top", "50px");
		$("#infoDIV").css("left", "10px");
		$("#infoDIV").css("display", "block");
		$("#infoDIV").css("z-index", "999");
	}

	function selectInfo(num, src) {
		$("#icon").val(num);
		$("#userInfo").attr("src", src);
		$("#infoDIV").css("display", "none");
		$("#shadow").css("display", "none");
	}

	/**
	 *初始化个性图像选择框
	 */
	function initInfo() {
		var html = "";
		for ( var i = 1; i < 159; i++) {
			html += "<div style='width:50px;height:50px;display:block;margin-left:2px;margin-top:2px;float:left;cursor:pointer;'><img src='img/info/"
					+ i
					+ ".jpg' style='left:5px;top:5px;border:1px solid black;' onmouseover='this.style.border=\"2px solid blue\"' onmouseout='this.style.border=\"1px solid black\"' onclick='selectInfo("
					+ i + ",\"img/info/" + i + ".jpg\")'/></div>";
			if (i % 11 == 0) {
				html += "<br/>";
			}
		}
		$("#infoDIV").html(html);
	}
	function validateName() {
		var val = $("#nickname").val();
		if (val.length == 0) {
			$("#nickname_msg").css("color", "red");
			$("#nickname_msg").html("昵称为必填");
			$("#nickname").focus();
			return false;
		}
		if(val.realLen()>10){
			$("#nickname_msg").css("color", "red");
			$("#nickname_msg").html("昵称不能超过10个长度");
			$("#nickname").focus();
			return false;
		}
		$("#nickname_msg").css("color", "green");
		$("#nickname_msg")
				.html(
						"<span style=\"width:16px;height:40px;display:block;float:left\"><img src='img/icon/accept.png' style='margin-top:12px;width:16px;height:16px;'/></span><span style='width:110px;height:40px;display:block;float:left;line-height:40px;'>昵称填写正确</span>");
		return true;
	}

	function validatePass() {
		var val = $("#password").val();
		if (val.length < 6) {
			$("#password_msg").css("color", "red");
			$("#password_msg").html("密码长度不能少于六位");
			$("#password").focus();
			return false;
		}
		$("#password_msg").css("color", "green");
		$("#password_msg")
				.html(
						"<span style=\"width:16px;height:40px;display:block;float:left\"><img src='img/icon/accept.png' style='margin-top:12px;width:16px;height:16px;'/></span><span style='width:110px;height:40px;display:block;float:left;line-height:40px;'>密码填写正确</span>");
		return true;
	}

	function validateQPass() {
		var val = $("#querypass").val();
		var oval = $("#password").val();
		if (val.length < 6) {
			$("#querypass_msg").css("color", "red");
			$("#querypass_msg").html("密码长度不能少于六位");
			$("#querypass").focus();
			return false;
		}
		if (val != oval) {
			$("#querypass_msg").css("color", "red");
			$("#querypass_msg").html("两次密码填写不一致");
			return false;
		}
		$("#querypass_msg").css("color", "green");
		$("#querypass_msg")
				.html(
						"<span style=\"width:16px;height:40px;display:block;float:left\"><img src='img/icon/accept.png' style='margin-top:12px;width:16px;height:16px;'/></span><span style='width:110px;height:40px;display:block;float:left;line-height:40px;'>密码填写正确</span>");
		return true;
	}

	function validateMail() {
		var val = $("#mail").val();
		if (val.length == 0) {
			$("#mail_msg").css("color", "red");
			$("#mail_msg").html("邮箱为必填信息");
			$("#mail").focus();
			return false;
		}
		var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
		if (!reg.test(val)) {
			$("#mail_msg").css("color", "red");
			$("#mail_msg").html("请填写合法的邮箱");
			$("#mail").focus();
			return false;
		}
		$
				.post(
						"servlet/ValidateMail.do",
						{
							mail : val
						},
						function(data, sta) {
							if (data == 1) {
								$("#mail_msg").css("color", "green");
								$("#mail_msg")
										.html(
												"<span style=\"width:16px;height:40px;display:block;float:left\"><img src='img/icon/accept.png' style='margin-top:12px;width:16px;height:16px;'/></span><span style='width:110px;height:40px;display:block;float:left;line-height:40px;'>邮箱填写正确</span>");
							} else {
								$("#mail_msg").css("color", "red");
								$("#mail_msg").html("邮箱已经注册，请更换邮箱");
								$("#mail").focus();
							}
						});
		return true;
	}

	function regis() {
		if (!validateName()) {
			return false;
		}
		if (!validatePass()) {
			return false;
		}
		if (!validateQPass()) {
			return false;
		}
		if (!validateMail()) {
			return false;
		}
		$("#submitBt").html("正在提交...");
		$("#submitBt").attr("disabled", "disabled");
		$("#regisForm").submit();
	}
</script>
</head>
<body>
	<form method="post" action="servlet/Regis.do" id="regisForm">
		<table align="center">
			<tr>
				<td>昵&nbsp;&nbsp;&nbsp;&nbsp;称</td>
				<td><input type="text" name="user.nickname" id="nickname"
					onblur="validateName()" /></td>
				<td style="width: 150px;"><div
						style="color: gray; font-size: 12px;" id="nickname_msg">昵称必填</div></td>
			</tr>
			<tr>
				<td>性&nbsp;&nbsp;&nbsp;&nbsp;别</td>
				<td><input type="radio" style="width: 20px;" name="user.sex"
					checked value="男" />男<input type="radio" style="width: 20px;"
					name="user.sex" value="女" />女</td>
				<td></td>
			</tr>
			<tr>
				<td>密&nbsp;&nbsp;&nbsp;&nbsp;码</td>
				<td><input type="password" name="user.password" id="password"
					onblur="validatePass()" /></td>
				<td><div style="color: gray; font-size: 12px;"
						id="password_msg">密码长度不能小于6位</div></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="querypass" id="querypass"
					onblur="validateQPass()" /></td>
				<td><div style="color: gray; font-size: 12px;"
						id="querypass_msg">密码长度不能小于6位</div></td>
			</tr>
			<tr>
				<td>邮&nbsp;&nbsp;&nbsp;&nbsp;箱</td>
				<td><input type="text" name="user.mail" id="mail"
					onblur="validateMail()" /></td>
				<td><div
						style="width: 150px; height: 40px; line-height: 40px; color: gray; font-size: 12px;"
						id="mail_msg">请填写合法邮箱</div></td>
			</tr>
			<tr>
				<td>个性图像</td>
				<td style=""><input type="hidden" name="user.icon" id="icon"
					value="1" /><img src='img/info/1.jpg'
					style="border: 1px solid black; margin-left: 5px;" id="userInfo" />&nbsp;&nbsp;<a
					href="javascript:showInfos()" style="font-size: 13px;">选择个性图像</a></td>
				<td><div style="color: gray; font-size: 12px;">请选择一张个性图像</div></td>
			</tr>
			<tr>
				<td>个性签名</td>
				<td><textarea name="user.signature" id="signature"
						style="width: 300px; height: 100px;"></textarea></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="button" id="submitBt"
						style="width: 90px; height: 30px; font-size: 15px;"
						onclick="regis()">注&nbsp;&nbsp;&nbsp;册</button>
				</td>
				<td></td>
			</tr>
		</table>
	</form>
	<div id="infoDIV"
		style="clear: both; width: 550px; height: 350px; overflow: auto; display: none; position: absolute; background: #fff; border: 3px solid #188EDE; border-radius: 8px;">
	</div>
	<div id="shadow"
		style="clear: both; width: 100%; height: 100%; background-color: #89A9B0; position: absolute; left: 0px; top: 0px; opacity: 0.3; display: none;">
		<!-- transparent -->
	</div>
</body>
</html>